<template>
  <div class="contains">
    <div>
      <div>
        <a-breadcrumb
          style="font-size: 18px; font-weight: bold; margin-bottom: 20px"
        >
          <a-breadcrumb-item>链上市场</a-breadcrumb-item>
          <a-breadcrumb-item>交易详细信息</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div style="float: right !important;padding:0px 20px 20px 0px">
        <a-button type="primary" @click="goBack()">
          <!-- <template #icon><SearchOutlined /></template> -->
          返 &nbsp; 回
        </a-button>
      </div>
    </div>

    <a-descriptions bordered style="margin: 20px">
      <a-descriptions-item label="交易记录ID" :span="3">
        {{ tradeInfo.trade_id }}
      </a-descriptions-item>
      <a-descriptions-item label="买方ID" :span="3">{{
        tradeInfo.buyer
      }}</a-descriptions-item>
      <a-descriptions-item label="卖方ID" :span="3">{{
        tradeInfo.seller
      }}</a-descriptions-item>
      <a-descriptions-item label="交易时间">
        {{ tradeInfo.trade_time }}
      </a-descriptions-item>
      <a-descriptions-item label="交易价格">
        {{ tradeInfo.price }}
      </a-descriptions-item>
      <a-descriptions-item label="合约电量">{{
        tradeInfo.contract_elec
      }}</a-descriptions-item>
      <a-descriptions-item label="买方实际用电量">{{
        tradeInfo.use_elec
      }}</a-descriptions-item>
      <a-descriptions-item label="卖方实际用电量">{{
        tradeInfo.output_elec
      }}</a-descriptions-item>
      <a-descriptions-item label="违约情况">{{
        tradeInfo.default_id == 0
          ? "未违约"
          : tradeInfo.default_id == 1
          ? "买方违约"
          : tradeInfo.default_id == 2
          ? "卖方违约"
          : tradeInfo.default_id == 3
          ? "双方均违约"
          : "暂未交易"
      }}</a-descriptions-item>

      <a-descriptions-item label="区块高度">
        {{ tradeInfo.block_height }}
      </a-descriptions-item>
      <a-descriptions-item label="区块哈希值" :span="3">{{
        tradeInfo.block_hash
      }}</a-descriptions-item>
      <a-descriptions-item label="父区块哈希值" :span="3">{{
        tradeInfo.block_pre_hash
      }}</a-descriptions-item>
      <a-descriptions-item label="nonce" :span="2">
        {{ tradeInfo.nonce }}
      </a-descriptions-item>
      <a-descriptions-item label="difficulty">
        {{ tradeInfo.difficulty }}
      </a-descriptions-item>
      <a-descriptions-item label="买方电表ID" :span="1">{{
        tradeInfo.buyer_elec_meter_id
      }}</a-descriptions-item>
      <a-descriptions-item label="卖方电表ID" :span="1">{{
        tradeInfo.seller_elec_meter_id
      }}</a-descriptions-item>
    </a-descriptions>
    <!-- <div>
      <a-modal
        v-model:visible="updateWinVisible"
        title="修改个人信息"
        @ok="execUpdate"
      >
        <div>
          <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
            <a-form-item label="居住地址">
              <a-input v-model:value="newInfo.address" />
            </a-form-item>
            <a-form-item label="工作单位">
              <a-input v-model:value="newInfo.work_unit" />
            </a-form-item>
            <a-form-item label="邮箱">
              <a-input v-model:value="newInfo.email" />
            </a-form-item>
            <a-form-item label="手机号码">
              <a-input v-model:value="newInfo.phone_number" />
            </a-form-item>
            <a-form-item label="个人描述">
              <a-input v-model:value="newInfo.user_desc" />
            </a-form-item>
          </a-form>
        </div>
      </a-modal>
    </div> -->
  </div>
</template>

<script setup>
import { DownloadOutlined, DashboardOutlined } from "@ant-design/icons-vue";
import { defineComponent, ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { get, post, tip } from "@/common";
import { Modal, message } from "ant-design-vue";
const route = useRoute();
const router = useRouter();
const tradeInfo = ref({});
const getTradeInfoById = () => {
  get("/trade/tradeInfo/getTradeDetail", {
    trade_id: route.query.trade_id,
  }).then((res) => {
    console.log(res.data);
    tradeInfo.value = res.data;
  });
};
getTradeInfoById();
const goBack = ()=>{
    router.go(-1);
}
</script>

<style scoped>
.contains {
  padding: 10px;
}
</style>